<template>
  <div>
    <div>
      <!-- 步骤条 -->
      <el-steps :space="200" :active="Number(index)" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <!-- Tab -->
      <div class="mt20">
        <!--   @tab-click="click" -->
        <el-tabs
          v-model="index"
          :before-leave="beforeLeave"
          :tab-position="tabPosition"
        >
          <el-tab-pane label="基本信息">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" prop="name">
                <el-input v-model="ruleForm.price" type="number"></el-input>
              </el-form-item>
              <el-form-item label="商品重量" prop="name">
                <el-input v-model="ruleForm.weight" type="number"></el-input>
              </el-form-item>
              <el-form-item label="商品数量" prop="name">
                <el-input v-model="ruleForm.num" type="number"></el-input>
              </el-form-item>
              <el-form-item label="商品分类" prop="name">
                <div class="block">
                  <el-cascader
                    v-model="value"
                    :options="options"
                    :props="{
                      expandTrigger: 'hover',
                      value: 'cat_id',
                      label: 'cat_name',
                    }"
                    @change="handleChange"
                  ></el-cascader>
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="商品参数">
            <el-checkbox
              v-for="(item, index) in goodsArg"
              v-model="item.flag"
              :key="index"
              :label="item.title"
              border
            ></el-checkbox>
          </el-tab-pane>
          <el-tab-pane label="商品属性">商品属性</el-tab-pane>
          <el-tab-pane label="商品图片">
            <el-upload
              class="upload-demo"
              action="http://127.0.0.1:8888/api/private/v1/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :before-upload="handleProgress"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容">
            <!-- <quill-editor v-model="html" @change="changeEdit"></quill-editor> -->
            <tree-table
              :data="cateList"
              :columns="columns"
              :selection-type="false"
              :expand-type="false"
              show-index
              index-text="#"
              border
            >
              <template v-slot:isok="scope">
                <i
                  class="el-icon-success"
                  style="color: lightgreen"
                  v-if="scope.row.cat_deleted === false"
                ></i>
                <i class="el-icon-error" style="color: red" v-else></i
              ></template>
            </tree-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategories, getCategoriesList } from "../../api/roles";
export default {
  async created() {
    let res = await getCategories();
    console.log(res);
    this.options = res;
  },
  data() {
    return {
      cateList: [],

      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          // 表示将当前列定义为模板列
          type: 'template',
          // 表示当前这一列的模板名称
          template: 'isok'
        }
      ],
      fileList: [],
      html: "",
      value: [],
      options: [],
      tabPosition: "left",
      index: "",
      //   基本信息表单
      ruleForm: {
        name: "",
        price: 0,
        weight: 0,
        num: 0,
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      //  商品参数
      goodsArg: [],
    };
  },
  methods: {
    // 文件上传
    handleProgress({ name, size }) {
      // /$(.png|jpg)/
      let suffix = name.split(".")[name.split(".").length - 1];
      if (suffix != ("jpg" || "png")) {
        this.$message.warning("请选择正确的格式");
        return false;
      } else {
        let picSize = Math.ceil(size / 1024);
        if (picSize >= 200) {
          this.$message.warning("只能上传jpg/png文件，且不超过200kb");
          return false;
        }
      }
      console.log(suffix);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    changeEdit() {
      console.log("change");
    },
    handleChange(value) {
      console.log(value);
    },
    beforeLeave(activeName) {
      // console.log(activeName, oldActiveName)
      //   if (Number(activeName) > 0 && this.value.length === 0) {
      //       this.$message.error("请先选择商品分类")
      //       return false
      //   } else {
      //       getCategoriesList({
      //           id: this.value[this.value.length - 1]
      //       }).then(res => {
      //           if (res) {
      //               let arr = res[0].attr_vals.split(' ')
      //               arr.forEach(title => {
      //                   this.goodsArg.push({
      //                       title,
      //                       flag: true
      //                   })
      //               })
      //           }
      //       })
      //     //   console.log(res.join(","))
      //   }
    },
    // click() {
    // //   console.log(this.index, );
    //   this.$refs.ruleForm.validate((flag) => {
    //       if (flag) {
    //           return false
    //       } else {
    //           this.index = "0"
    //           this.$message.error("请先选择商品分类")
    //           console.log(this.index)
    //       }
    //   });
    // },
  },
};
</script>

<style>
</style>